Ext.define("App.classic.view.home.Line", {
    extend: 'App.ux.BaseECharts',
    xtype: 'viewhomeLine',
    border: false,
    initComponent: function () {
        var me = this;

        me.option  ={
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                color: ["#F58080", "#47D8BE", "#F9A589"],
                data: ['新报', '流失', '续费'],
                left: 'center',
                bottom: 'bottom'
            },
            grid: {
                top: 'middle',
                left: '3%',
                right: '4%',
                bottom: '3%',
                height: '80%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: [100,200,20,30,60,89],
                axisLine: {
                    lineStyle: {
                        color: "#999"
                    }
                }
            },
            yAxis: {
                type: 'value',

                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#DDD'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#333"
                    },
                },
                nameTextStyle: {
                    color: "#999"
                },
                splitArea: {
                    show: false
                }
            },
            series: [{
                name: '新报',
                type: 'line',
                data: [800,900,220,130,660,289],
                color: "#F58080",
                lineStyle: {
                    normal: {
                        width: 5,
                        color: {
                            type: 'linear',

                            colorStops: [{
                                offset: 0,
                                color: '#FFCAD4' // 0% 处的颜色
                            }, {
                                offset: 0.4,
                                color: '#F58080' // 100% 处的颜色
                            }, {
                                offset: 1,
                                color: '#F58080' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(245,128,128, 0.5)',
                        shadowBlur: 10,
                        shadowOffsetY: 7
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#F58080',
                        borderWidth: 10,
                        /*shadowColor: 'rgba(72,216,191, 0.3)',
                         shadowBlur: 100,*/
                        borderColor: "#F58080"
                    }
                },
                smooth: true
            },
                {
                    name: '流失',
                    type: 'line',
                    data: [123,568,111,222,123,56],
                    lineStyle: {
                        normal: {
                            width: 5,
                            color: {
                                type: 'linear',

                                colorStops: [{
                                    offset: 0,
                                    color: '#AAF487' // 0% 处的颜色
                                },
                                    {
                                        offset: 0.4,
                                        color: '#47D8BE' // 100% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#47D8BE' // 100% 处的颜色
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(71,216,190, 0.5)',
                            shadowBlur: 10,
                            shadowOffsetY: 7
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#AAF487',
                            borderWidth: 10,
                            /*shadowColor: 'rgba(72,216,191, 0.3)',
                             shadowBlur: 100,*/
                            borderColor: "#AAF487"
                        }
                    },
                    smooth: true
                },
                {
                    name: '续费',
                    type: 'line',
                    data: [125,568,25,36,784,56],
                    lineStyle: {
                        normal: {
                            width: 5,
                            color: {
                                type: 'linear',

                                colorStops: [{
                                    offset: 0,
                                    color: '#F6D06F' // 0% 处的颜色
                                },
                                    {
                                        offset: 0.4,
                                        color: '#F9A589' // 100% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#F9A589' // 100% 处的颜色
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(249,165,137, 0.5)',
                            shadowBlur: 10,
                            shadowOffsetY: 7
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F6D06F',
                            borderWidth: 10,
                            /*shadowColor: 'rgba(72,216,191, 0.3)',
                             shadowBlur: 100,*/
                            borderColor: "#F6D06F"
                        }
                    },
                    smooth: true
                }
            ]
        };


        //me.requestAjax();
        me.on('boxready',function () {
            me.setOption(me.option);
        });
        me.callParent();
    },
    load: function (params) {
        //this.requestAjax(params)
    },
    requestAjax: function (params) {
        var me = this;
        var params = Ext.apply(this.params,params);
        me.removeDatas();
        Ext.Ajax.request({
            url: '',
            method: 'get',
            params: params,
            success: function (response) {
                var obj = Ext.decode(response.responseText);
                var data = obj.data;

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data: data.legendData
                    },
                    xAxis: data.xAxis,
                    series: data.series
                };
                me.setOption(option);
            },
            failure: function (response) {
                console.log('server-side failure with status code ' +
                    response.status);
            }

        });
    }
});
